<template>
	<view class="content">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view style="width: 100%; display: flex;justify-content: space-between;align-items: center; box-sizing: border-box;padding: 0 24rpx;">
			<view style="display: flex;justify-content: flex-start;align-items: center; ">
				<view style="width: 72rpx;" @click="goBack">
					<view style="border: 2rpx solid #E5E6E8;border-radius: 24rpx;">
						<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" src="/static/images/icon/left-icon.png"></image>
					</view>
				</view>
				<view style="font-size: 32rpx;color: #232426;margin-left: 16rpx;font-weight: 500;">編輯發佈</view>
			</view>
			<view style="display: flex;justify-content: flex-end;align-items: center; ">
				<u-icon name="trash" color="#6A707C" size="42rpx"></u-icon>
				<view @click="submit" style="margin-left: 18rpx; color: #FFF;background-color:#1AAEC0;font-size:28rpx;border-radius: 200rpx;border: 2rpx solid #1AAEC0;padding: 10rpx 32rpx;">
					儲存
				</view>
			</view>
		</view>
		<view style="margin-top: 28rpx; width: 100%;box-sizing: border-box;padding: 0 30rpx;">
			<view style="background-color: #FFF;border-radius: 40rpx;">
				<view style="display:flex; overflow-x: auto; padding: 24rpx;gap: 12rpx; width: 90%; ">
					<view v-for="(item, index) in images" :key="index"  style="width: 180rpx;height: 210rpx;background-color: #F0F0F0;border-radius: 20rpx;flex-shrink: 0;">
						<view style="position: relative;display: inline-block;" @click="showImgFn(index)">
							<u-image
								:src="item.url"
								width="180rpx"
								height="210rpx"
								radius="20rpx"
							></u-image>
							<view v-if="index == 0" style="position: absolute;bottom:8rpx;left:8rpx;color: #fff;font-size: 22rpx;border-radius: 20rpx;padding: 8rpx 20rpx;background-color: rgba(0, 0, 0, 0.4)">
								封面
							</view>
						</view>
					</view>
					<view style="width: 180rpx;height: 210rpx;background-color: #F0F0F0;border-radius: 20rpx;flex-shrink: 0;" @click="chooseImg" v-if="images.length < 10">
						<view style="margin: 87rpx 0 0 72rpx;">
							<u-image
								src="/static/images/icon/plus-grey.png"
								width="36rpx"
								height="36rpx"
							></u-image>
						</view>
					</view>
				</view>
				<view style="border-top: 2rpx solid #FAFAFA;padding:28rpx 24rpx 0;">
					<u-input name="title" placeholder="請輸入標題,獲得更多瀏覽量" v-model="form.title" border="none" maxlength="20" @change="handleInput"></u-input>
					<view style="color:#BEC0C5;font-size: 20rpx;display: flex;justify-content: flex-end;">
						{{input_count}} / 20
					</view>
				</view>
				<view style="border-top: 2rpx solid #FAFAFA;padding:28rpx 24rpx 0;">
					<editor 
						id="editor" 
						class="ql-container"
						placeholder="請輸入介紹文字，有趣的詳細內容可加分！"
						@input="onInput"
						@ready="onEditorReady" 
					>
					</editor>
				</view>
				<view style="border-top: 2rpx solid #FAFAFA;padding:28rpx 24rpx;display: flex;justify-content: space-between;">
					<view style="display: flex;justify-content: flex-start;">
						<view @click="openNicknameFn">
							<u-image
								src="/static/images/icon/at.png"
								width="40rpx"
								height="40rpx"
							></u-image>
						</view>
						<view style="margin-left: 38rpx;"  @click="openTopicFn">
							<u-image
								src="/static/images/icon/well-no.png"
								width="40rpx"
								height="40rpx"
							></u-image>
						</view>
					</view>
					<view style="color:#BEC0C5;font-size: 20rpx;">
						{{textarea_count}} / 500
					</view>
				</view>
			</view>
		</view>
		
		<view style="margin-top: 24rpx; width: 100%;box-sizing: border-box;padding: 0 30rpx;">
			<view class="list-item" @click="openClassifyFn">
				<view class="list-item-title">
					<view class="item-title">
						<view class="title">分類</view>
						<view class="warning-bag">*</view>
					</view>
					<view :class="{'item-subtitle':classifyCheck==false,'item-subtitle-active':classifyCheck==true}" >
						{{form.classify}}
					</view>
				</view>
				<view>
					<u-image
						src="/static/images/icon/right-icon.png"
						width="40rpx"
						height="40rpx"
					></u-image>
				</view>
			</view>
		</view>
		
		<view style="margin-top: 24rpx; width: 100%;box-sizing: border-box;padding: 0 30rpx;">
			<view class="list-item" @click="openTypeFn">
				<view class="list-item-title">
					<view class="item-title">
						<view class="title">預約類型</view>
						<view class="warning-bag">*</view>
					</view>
					<view :class="{'item-subtitle':typeNameCheck==false,'item-subtitle-active':typeNameCheck==true}" >
						{{typeName}}
					</view>
				</view>
				<view>
					<u-image
						src="/static/images/icon/right-icon.png"
						width="40rpx"
						height="40rpx"
					></u-image>
				</view>
			</view>
			<view v-if="this.form.type == 1" @click="openAreaFn" class="list-item" >
				<view class="list-item-title">
					<view class="item-title">
						<view class="title">可服務區</view>
						<view class="warning-bag">*</view>
					</view>
					<view class="item-subtitle" >
						{{areaName}}
					</view>
				</view>
				<view>
					<u-image
						src="/static/images/icon/right-icon.png"
						width="40rpx"
						height="40rpx"
					></u-image>
				</view>
			</view>
			<view v-if="this.form.type == 2" @click="openAddressFn" class="list-item">
				<view class="list-item-title">
					<view class="item-title">
						<view class="title">服務地址</view>
						<view class="warning-bag">*</view>
					</view>
					<view class="item-subtitle" >
						服務地址
					</view>
				</view>
				<view>
					<u-image
						src="/static/images/icon/right-icon.png"
						width="40rpx"
						height="40rpx"
					></u-image>
				</view>
			</view>
			<view class="list-item" @click="openMeterFn">
				<view class="list-item-title">
					<view class="item-title">
						<view class="title">收費計價</view>
						<view class="warning-bag">*</view>
					</view>
					<view class="item-subtitle" @click="openMeterFn">
						{{priceName}}
					</view>
				</view>
				<view>
					<u-image
						src="/static/images/icon/right-icon.png"
						width="40rpx"
						height="40rpx"
					></u-image>
				</view>
			</view>
			<view class="list-item" @click="openAppointmentFn">
				<view class="list-item-title">
					<view class="item-title">
						<view class="title">預約時間</view>
						<view class="warning-bag">*</view>
					</view>
					<view class="item-subtitle" >
						選擇時間
					</view>
				</view>
				<view>
					<u-image
						src="/static/images/icon/right-icon.png"
						width="40rpx"
						height="40rpx"
					></u-image>
				</view>
			</view>
		</view>
		
		<!--圖片查看開始-->
		<u-overlay :show="showImg" opacity="1" :duration="400">
			<view class="container">
				<view class="imgs">
					<image
						:src="picUrl"
						mode="widthFix"
						style="width: 100%;"
					></image>
				</view>
				<view class="footer">
					<view class="btn" @click="delImg">刪除</view>
					<view class="btn" @click="endShowImg">完成</view>
				</view>
			</view>
		</u-overlay>
		<!--圖片查看結束-->
		
		<!--好友搜索-->
		<u-popup :show="showUserPopup" @close="showUserPopup = false" :round="60">
			<view class="user-search-popup">
				<view>
					<u-search placeholder="搜尋" v-model="keyword" @change="changeSearch"></u-search>
				</view>
				<view>
					<view v-for="(item, index) in userList" :key="index" class="search-popup-item" @click="checkNickname(index)">
						<view>
							<u--image
								:src="item.url"
								shape="circle"
								width="56rpx"
								height="56rpx"
							></u--image>
						</view>
						<view class="title">
							<text v-for="(segment, index_) in item.highlightTitle" :key="index_" :class="{ 'highlight': segment.highlight }">
								{{segment.text}}
							</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!--好友搜索結束-->
		
		<!--話題搜索-->
		<u-popup :show="showTopicPopup" @close="showTopicPopup = false" :round="60">
			<view class="user-search-popup">
				<view>
					<u-search placeholder="搜尋" v-model="keyword" @change="changeSearch"></u-search>
				</view>
				<view>
					<view v-for="(item, index) in topicList" :key="index" class="search-popup-item" @click="checkTopic(index)">
						<view>
							<u--image
								src="/static/images/icon/topic.png"
								shape="circle"
								width="56rpx"
								height="56rpx"
							></u--image>
						</view>
						<view class="title">
							<text v-for="(segment, index_) in item.highlightTitle" :key="index_" :class="{ 'highlight': segment.highlight }">
								{{segment.text}}
							</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!--話題搜索結束-->
		
		<!--預約類型-->
		<u-popup :show="showType" mode="bottom" round="48rpx" @close="showType=false">
			<view class="popup-push-type">
				<view class="popup-push-header">
					<view class="site" @click="closeTypeFn">取消</view>
					<view class="site title">預約類型</view>
					<view class="site btn" @click="setTypeFn">選擇</view>
				</view>
				<view class="popup-push-body">
					<view class="popup-push-list">
						
						<view class="popup-push-item" v-for="(item,index) in typeList" :key="index" @click="checkTypeFn(item.type)">
							<view class="popup-push-icon">
								<u-image
									v-if="item.type == typeId"
									src="/static/images/icon/success-solid.png"
									width="48rpx"
									height="48rpx"
								></u-image>
								<view v-else class="popup-push-radio"></view>
							</view>
							<view class="popup-push-text">
								<view class="title">{{item.title}}</view>
								<view class="describe">{{item.describe}}</view>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</u-popup>
		<!--預約類型結束-->
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				typeTitle:'發佈任務需求',
				form:{
					title:'客製化花束，韓式浪漫氛圍束',
					introduce:'',
					classify:'形象管理、寵物照顧',
					type:0
				},
				classifyCheck:false,
				images:[{
					url:'https://ciittomedica.oss-cn-hangzhou.aliyuncs.com/image/default.jpg',
				},{
					url:'https://ciittomedica.oss-cn-hangzhou.aliyuncs.com/image/default.jpg',
				},
				{
					url:'https://ciittomedica.oss-cn-hangzhou.aliyuncs.com/image/default.jpg',
				},{
					url:'https://ciittomedica.oss-cn-hangzhou.aliyuncs.com/image/default.jpg',
				}],
				input_count:0,
				textarea_count:0,
				showImg:false,
				picUrl:'',
				current:-1,
				keyword:'',
				showUserPopup:false,
				userList:[{
					id:1,
					url:'/static/images/icon/images/default.jpg',
					title:'田野黃金稱道',
					highlightTitle:[]
				},{
					id:2,
					url:'/static/images/icon/images/default.jpg',
					title:'麥田守望者',
					highlightTitle:[]
				},{
					id:3,
					url:'/static/images/icon/images/default.jpg',
					title:'nick',
					highlightTitle:[]
				},{
					id:4,
					url:'/static/images/icon/images/default.jpg',
					title:'Magic___-r',
					highlightTitle:[]
				},{
					id:5,
					url:'/static/images/icon/images/default.jpg',
					title:'rD97231690_',
					highlightTitle:[]
				}],
				isFocus:false,
				showTopicPopup:false,
				topicList:[{
					id:1,
					title:'花束藝術',
					highlightTitle:[]
				},{
					id:2,
					title:'浪漫花束情人節',
					highlightTitle:[]
				},{
					id:3,
					title:'花藝設計',
					highlightTitle:[]
				},{
					id:4,
					title:'花束禮物',
					highlightTitle:[]
				},{
					id:5,
					title:'鮮花',
					highlightTitle:[]
				}],
				isTopicFocus:false,
				sign:'',
				showType:false,
				typeId:0,
				typeNameCheck:false,
				typeName:'到店',
				typeList:[{
					type:1,
					title:'到府',
					describe:'可至指定地點提供服務'
				},
				{
					type:2,
					title:'到店',
					describe:'您有店面，可讓顧客預約並前往體驗'
				},
				{
					type:3,
					title:'線上',
					describe:'無距離限制，彈性提供專業服務'
				}],
				areaName:'選擇區域',
				priceName:'選擇價錢',
				editorCtx: null,
				richText:`<div style="font-size: 14px;line-height: 1.6; letter-spacing: 0.14px;">
						<div style="margin-top:20rpx;">想要一束獨一無二的花，傳遞你的心意嗎？</div>
						<div style="margin-top:20rpx;">無論是生日、紀念日、求婚，還是簡單想為生活增添一點儀式感，我都能為你打造專屬的客製化花束！</div>
						<div style="margin-top:20rpx;">以韓式花藝風格為靈感，融合柔和色調與自然線條，每一束花都是細膩設計，讓你的禮物更具溫度與質感。你可以告訴我你的喜好、色系需求，或是讓我為你搭配最合適的花材，打造一束充滿浪漫氛圍的夢幻花束。</div>
						<ul>
							<li style="margin-top:10rpx;">手工設計，獨一無二</li>
							<li style="margin-top:10rpx;">精選新鮮花材，質感滿分</li>
							<li style="margin-top:10rpx;">溫柔韓式風格，氣質加倍</li>
						</ul>
						<div style="margin-top:20rpx;">現在開放訂單，歡迎私訊詢問💌</div>
						<div style="margin-top:5rpx;">讓花語替你說出心裡的話🌷💕</div>
						<div style="margin-top:20rpx;color:#1AAEC0;">@penny2560</div>
						<div style="margin-top:20rpx;color:#1AAEC0;">＃花藝 ＃花束設計 ＃情人節 ＃情侶</div></div>`,
			}
		},
		onLoad(option) {
			console.log(option)
			if( option.type == 'expert' ){
				this.typeTitle = '發佈達人技能';
			} else if(option.type == 'task'){
				this.typeTitle = '發佈任務需求';
			} else if(option.type == 'colony'){
				this.typeTitle = '發佈貼文';
			} else {
				
			}
		},
		methods: {
			onInput(e) {
				this.form.introduce = e.detail.html
			},
			goBack(){
				uni.navigateBack();
			},
			chooseImg(){
				let that = this;
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths)
						for(let i=0;i<tempFilePaths.length;i++){
							that.images.push({url:tempFilePaths[i]});
						}
						// uni.uploadFile({
						// 	url: 'https://www.example.com/upload', //仅为示例，非真实的接口地址
						// 	filePath: tempFilePaths[0],
						// 	name: 'file',
						// 	formData: {
						// 		'user': 'test'
						// 	},
						// 	success: (uploadFileRes) => {
						// 		console.log(uploadFileRes.data);
						// 	}
						// });
					}
				});
			},
			handleInput(){
				this.input_count = this.form.title.replace(/[\s\n]/g, '').length;
			},
			handleTextarea(){
				//統計字數
				this.textarea_count = this.form.introduce.replace(/[\s\n]/g, '').length;
				//監聽
				const lastChar = this.form.introduce.slice(-1);
				// 判断是否为@或#
				if (lastChar === '@') {
					this.openNicknameFn();
					this.sign = '';
				} else if(lastChar === '#'){
					this.openTopicFn();
					this.sign = '';
				} else {
					this.showUserPopup  = false;
					this.showTopicPopup = false;
				}
				// const lastAtIndex = content.lastIndexOf('@');
				// if (lastAtIndex === -1) {
				// 	console.log('關閉彈窗'); // 无@则关闭弹窗
				// 	return;
				// }
				// // 提取@后的内容（直到遇到空格或结尾）
				// const keyword = content.slice(lastAtIndex + 1).split(/\s/)[0];
				// console.log('搜索內容:', keyword);
				// console.log('打開彈窗'); // 打开弹窗
			},
			showImgFn(e){
				this.url = this.images[e].url;
				this.current = e;
				this.showImg = true;
			},
			endShowImg(){
				this.url = '';
				this.current = -1;
				this.showImg = false;
			},
			delImg(){
				this.images.splice(this.current, 1);
				this.endShowImg();
			},
			openNicknameFn(){
				this.sign = '@';
				this.setHighlightTitle(this.userList);
				this.showUserPopup = true;
			},
			openTopicFn(){
				this.sign = '#';
				this.setHighlightTitle(this.topicList);
				this.showTopicPopup = true;
			},
			checkNickname(id){
				let that = this;
				let str = that.form.introduce+ `<span style="color: #188CA2">` +that.sign+that.userList[id].title+ `&nbsp;</span><p style="color: #000;">&nbsp;</p>`;
				that.form.introduce = str;
				console.log(str);
				that.sign = '@';
				that.showUserPopup = false;
				uni.createSelectorQuery()
					.in(this)
					.select('#editor')
					.context(res => {
						this.editorCtx = res.context
						// 初始化赋值
						this.editorCtx.setContents({
							html: str,
							success:()=>{
								// this.editorCtx.setSelectionRange({
								// 	start: str.length,
								// 	end: str.length
								// })
								console.log('sss')
							}
						})
						
					}).exec()
				// const textarea = that.$refs.myTextarea;
				// this.$nextTick(() => {
				//   // textarea.focus();
				//   // that.isFocus = true;
				//   // textarea.setSelectionRange(that.form.introduce.length, that.form.introduce.length);
				//   //textarea.selectionStart = textarea.selectionEnd = textarea.value.length; // 方法2:ml-citation{ref="8" data="citationList"}
				//   // uni.showKeyboard();
				// });
			},
			onEditorReady() {
				let that = this;
				uni.createSelectorQuery()
					.in(this)
					.select('#editor')
					.context(res => {
						this.editorCtx = res.context
						// 初始化赋值
						this.editorCtx.setContents({
							html: that.richText,
							success:()=>{
								// this.editorCtx.setSelectionRange({
								// 	start: str.length,
								// 	end: str.length
								// })
								console.log('sss')
							}
						})
						
					}).exec()
			},
			checkTopic(id){
				let that = this;
				that.form.introduce = that.form.introduce+that.sign+that.topicList[id].title+' ';
				that.sign = '#';
				that.showTopicPopup = false;
				const textarea = that.$refs.myTextarea;
				this.$nextTick(() => {
				  // textarea.focus();
				  that.isFocus = true;
				  // textarea.setSelectionRange(that.form.introduce.length, that.form.introduce.length);
				  //textarea.selectionStart = textarea.selectionEnd = textarea.value.length; // 方法2:ml-citation{ref="8" data="citationList"}
				  // uni.showKeyboard()
				});
			},
			changeSearch(){
				this.setHighlightTitle(this.userList)
				this.setHighlightTitle(this.topicList)
			},
			setHighlightTitle(data){
				for( let i in data ){
					console.log(data[i].title)
					data[i].highlightTitle = this.highlightTitle(data[i].title);
				}
			},
			//高亮搜索結果
			highlightTitle(title){
				if (!this.keyword) {
					// 无关键词时显示完整标题
				    return [{ text: title, highlight: false }];
				}
				
				const segments = [];
				let remainingText = title;
				const lowerKeyword = this.keyword; // 不区分大小写
				
				// 循环切割匹配部分
				while (remainingText) {
					const lowerText = remainingText;
					const index = lowerText.indexOf(lowerKeyword);

					if (index === -1) {
						segments.push({ text: remainingText, highlight: false });
						break;
					}

					// 切割非匹配部分
					if (index > 0) {
						segments.push({
							text: remainingText.slice(0, index),
							highlight: false
						});
					}

					// 切割匹配部分
					segments.push({
						text: remainingText.slice(index, index + this.keyword.length),
						highlight: true
					});

					// 剩余文本继续处理
					remainingText = remainingText.slice(index + this.keyword.length);
				}
				return segments;
			},
			//選擇分類
			openClassifyFn(){
				let that = this;
				uni.navigateTo({
					url: '/pages/demand/filter',
					events: {
						// 定义接收事件
						acceptData: (data) => {
							console.log('接收数据:', data);
							that.form.classify = data.data[0].title;
							that.classifyCheck = true;
						}
					},
					success: (res) => {
						// 向B页面传递初始数据（可选）
						res.eventChannel.emit('initData', { maxCount: 1 });
					}
				});
			},
			openTypeFn(){
				this.typeId = this.form.type;
				this.showType = true;
			},
			closeTypeFn(){
				this.typeId = 0;
				this.showType = false;
			},
			checkTypeFn(type){
				this.typeId = type;
			},
			setTypeFn(){
				this.form.type = this.typeId;
				for(let i in this.typeList){
					if( this.typeList[i].type == this.form.type ){
						this.typeName = this.typeList[i].title;
						this.typeNameCheck = true;
					}
				}
				this.closeTypeFn();
			},
			openAreaFn(){
				let that = this;
				uni.navigateTo({
					url: '/pages/demand/city',
					events: {
						// 定义接收事件
						acceptData: (data) => {
							console.log('接收数据:', data);
							that.areaName = data.name.join(',');
						}
					},
					success: (res) => {
						// 向B页面传递初始数据（可选）
						// res.eventChannel.emit('initData', { type: 1 });
					}
				});
			},
			openAddressFn(){
				let that = this;
				uni.navigateTo({
					url: '/pages/demand/address',
					events: {
						// 定义接收事件
						acceptData: (data) => {
							console.log('接收数据:', data);
							that.areaName = data.name.join(',');
						}
					},
					success: (res) => {
						// 向B页面传递初始数据（可选）
						// res.eventChannel.emit('initData', { type: 1 });
					}
				});
			},
			openMeterFn(){
				let that = this;
				uni.navigateTo({
					url: '/pages/demand/meter',
					events: {
						// 定义接收事件
						acceptData: (data) => {
							console.log('接收数据:', data);
							that.priceName = data.data;
						}
					},
					success: (res) => {
						// 向B页面传递初始数据（可选）
						// res.eventChannel.emit('initData', { type: 1 });
					}
				});
			},
			openAppointmentFn(){
				let that = this;
				uni.navigateTo({
					url: '/pages/demand/appointment',
					events: {
						// 定义接收事件
						acceptData: (data) => {
							console.log('時間:', data);
						}
					},
					success: (res) => {
						// 向B页面传递初始数据（可选）
						// res.eventChannel.emit('initData', { type: 1 });
					}
				});
			},
			submit(){
				uni.switchTab({
					url: '/pages/home/index'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		background-color: #F6F8FA;
		min-height: 100vh;
	}
	.list-item{
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 34rpx 24rpx;
		background-color: #FFF;
		margin-top: 2rpx;
		align-items: center;
		
		.list-item-title{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			
			.item-title{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				width: 144rpx;
				font-size: 28rpx;
				
				.title{
					color: #232426;
					font-size: 28rpx;
					font-weight: 500;
				}
				.warning-bag{
					color: #FF3D43;
					margin-left: 10rpx;
				}
			}
			.item-subtitle{
				color: #BEC0C5;
				font-size: 28rpx;
				font-weight: 500;
				margin-left: 24rpx;
			}
			.item-subtitle-active{
				color: #232426;
				font-size: 28rpx;
				font-weight: 500;
				margin-left: 24rpx;
			}
		}
		
	}
	
	.list-item:first-of-type{
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
	}
	.list-item:last-of-type{
		border-bottom-left-radius: 24rpx;
		border-bottom-right-radius: 24rpx;
	}
	.container{
		position: relative;
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		
		.imgs{
			position: absolute;
			top: 50%;           /* 顶部定位到父容器 50% 位置 */
			left: 50%;          /* 左侧定位到父容器 50% 位置 */
			transform: translate(-50%, -50%); /* 自身宽高的 -50% 偏移 */
			width: 100%;
			text-align: center;
		}
		
		.footer{
			width: 100%;
			position: absolute;
			display: flex;
			justify-content: space-between;
			padding: 0 50rpx;
			box-sizing: border-box;
			bottom: 50rpx;
			
			.btn{
				color: #FFF;
			}
		}
	}
	.user-search-popup{
		width: 100%;
		background-color: #FAFAFA;
		padding: 24rpx 48rpx;
		box-sizing: border-box;
		
		.search-popup-item{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 20rpx;
			
			.title{
				margin-left: 20rpx;
				font-size: 24rpx;
				color:#232426;
			}
			.highlight {
			  color: #27C5D6; /* 红色高亮 */
			  font-weight: bold; /* 可选：加粗强调 */
			}
		}
	}
	.popup-push-type{
		padding: 58rpx 40rpx 28rpx;
		
		.popup-push-header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.site{
				color: #808690;
				font-size: 32rpx;
			}
			.title{
				color: #232426;
				font-size: 30rpx;
				font-weight: 600;
			}
			.btn{
				color: #27C5D6;
				font-size: 32rpx;
			}
		}
		.popup-push-body{
			margin-top: 24rpx;
			
			.popup-push-list{
				
				box-sizing: border-box;
				
				.popup-push-item{
					margin-top: 32rpx;
					padding: 20rpx 48rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					background: #F6F8FA;
					border-radius: 120rpx;
					
					.popup-push-icon{
						
					}
					.popup-push-radio{
						border-radius: 50%;
						width: 48rpx;
						height: 48rpx;
						background-color: #E5E6E8;
					}
					
					.popup-push-text{
						margin-left: 32rpx;
						width: 400rpx;
						
						.title{
							font-size:28rpx;
							font-weight: 600;
						}
						.describe{
							color:#6A707C;
							font-size:24rpx;
						}
					}
					
					.popup-push-arrow{
						margin-left: 32rpx;
					}
					
				}
			}
		}
	}
</style>
